<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 30px;
            border: 1px solid #000;
            margin: 20px;
        }
        div p {
            height: 100%;
            width: 0%;
            margin: 0;
        }
        section{
            height: 200px;
            width: 200px;
            border: 1px solid #000;
            background-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body>
    <div style="border-color: red;">
        <p style="background-color: rgb(225,0,0);"></p>
    </div>
    <div style="background-color:green;">
    <p style="background-color: blue;"></p>
</div>
<div>
    <p style="background-color: #eee;"></p>
</div>
<section></section>
<script>
    // 按下div设置p标签宽度值根据鼠标位置更改，抬起时停止
    // p的宽：div的宽 == 想要的值：255;

    // 1.获取所有div, 是一个数组集合
    var div = document.querySelectorAll("div");
    var p = document.querySelectorAll("p");
    var section = document.querySelector("section");
    // 8.初始一个数组,假设rbga的四个值;四个值的索引值与div的索引值一一对应
    var rgba = [0,0,0,1];
    // 2.循环获取每个div标签
    for(var i = 0; i <div.length;i++){
        // 4.给每个人div标签添加一个自定义属性index,值是当前标签的索引值
        div[i].index = i ; // div[0].index = 0; div[1].index = 1;
        // 3.给每个div添加一个鼠标按下事件
        div[i].onmousedown = function(e){
            console.log(this.index);// 
            // 5.鼠标按下时,设置当前标签子标签p宽度的更改
            var n = this.index;
            // 6.根据事件对象获取鼠标位置
            var w = e.pageX - this.offsetLeft;
            p[n].style.width = w + "px";


            // 7.获取一个rgba值 (根据this.index)
            rgba[n] = n === 3 ? (w / 500).toFixed(3) : parseInt(w * 255 / 500);
            // if(n === 3){
                // 计算机的是a的值
                // rgba[n] =(w / 500).toFixed(3);
            // }else{
            //   // 计算rgb的值
            rgba[n] = parseInt(w * 255 / 500);
            // }
            section.style.backgroundColor = `rgba(${rgba[0]},${rgbs[1]},${rgba[2]},${rgba[3]})`
        }
    }
    div[i],onmouseup = function(){
        this.onmousemove = "none";
    }
</script>
</body>
</html>